<template>
  <div class="advisory">
      <h1 class="title">{{radio}}</h1>
      <ul>
          <li v-for="(item,index) in firstNews.list" :key="index">
           <div class="date">
             {{item.createtime.slice(0,11)}}
           </div>
           <div class="content">
             <div class="maintitle">
               <span class="yuan">
                 <i></i>
               </span>
                  <nuxt-link target="_blank" :to="'/post/' + item.pid">{{item.name}}</nuxt-link>
             </div>
             <div class="fenxiang">
               <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-pinglun"></use>
              </svg>
              <span class="num">{{item.reviewNum}}条评论</span>
              <span class="line"></span>
              <span>分享到：</span>
              
               <svg class="icon curpon icon1" aria-hidden="true" @click="weixin(item.pid)">
                <use :xlink:href="icon1"></use>
              </svg>

               <svg class="icon curpon icon2" aria-hidden="true" @click="weibo(index)">
                <use :xlink:href="icon2"></use>
              </svg>
               <svg class="icon curpon icon3" aria-hidden="true" @click="kongjian(index)">
                <use :xlink:href="icon3"></use>
              </svg>
             </div>
           </div>
        </li>
      </ul>
        <div class="fenye">
                  <el-pagination
                    @current-change="handleCurrentChange"
                    :page-size="10"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
          </div>  
            <el-dialog
            :visible.sync="centerDialogVisible"
             custom-class='erweima'
            width="30%"
            center>
            <p>分享到微信朋友圈</p>
            <div class="imgbox"><img :src="'http://qr.liantu.com/api.php?&w=200&text=http://www.tqcaifu.com/post/' + postid" alt=""></div>
            
            <p>打开微信，点击底部的“发现”，</p>
            <p>使用“扫一扫”即可将网页分享至朋友圈。</p>
           
          </el-dialog>
        
  </div>
</template>

<script>
import api from '../../../static/js/api.js'
import asyncApi from '../../../static/js/asyncApi.js'
export default {
  components:{
       
  },
  data() {
    return{
      centerDialogVisible:false,
      icon1:'#icon-big-WeChat',
      icon2:'#icon-tubiao214',
      icon3:'#icon-qqkongjian',
      postid:'1'
    }
  },
  methods: {
    handleCurrentChange(val){
      api.getCategoryPost({categoryName:this.radio,page:val,pageSize:"10",orderBy:"createtime",orderByType:"desc"}).then((res)=>{
        this.firstNews = res.data
       })
    },
    weixin(val){
      this.centerDialogVisible =true
      this.postid = val
    },
    weibo(val){
       var url = "http://www.tqcaifu.com/post/" + this.firstNews.list[val].pid;
       var title = this.firstNews.list[val].name
       var share = "http://service.weibo.com/share/share.php?url="+url+"&appkey=441808809&pic=&title="+ title +"#_loginLayer_1528269570659"
       window.open(share,'_blank','width=800,height=600,top=100px')
    },
    kongjian(val){
       var url = "http://www.tqcaifu.com/post/" + this.firstNews.list[val].pid;
       var title = this.firstNews.list[val].name
       var summary = this.firstNews.list[val].summary
       var share = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url="+ url +"&title="+title +"&pics=&desc=&summary="
       window.open(share,'_blank','width=800,height=600,top=100px')
    }
  },
  mounted:function(){
    
  },
  async asyncData (context) {
    var id = context.params.id;   
    var title = '财经快讯_金融资讯-天沁财富';
    var keywords = '财经快讯，财经资讯，金融快讯，金融资讯';
    var description = '天沁财富为金融投资者提供实时专业全方位的财经金融新闻资讯、财经快讯、财经头条及财经深度分析，覆盖宏观经济、金融市场、商业动态、产业经济、上市公司、投资理财等财经领域。';
      switch (id) {
      case "dailynews":
        id = "每日财讯";
        title = '财经快讯_金融资讯-天沁财富';
        keywords = '财经快讯，财经资讯，金融快讯，金融资讯';
        description = '天沁财富为金融投资者提供实时专业全方位的财经金融新闻资讯、财经快讯、财经头条及财经深度分析，覆盖宏观经济、金融市场、商业动态、产业经济、上市公司、投资理财等财经领域。';
        break;
      case "viewpoint":
        id = "名家观点";
        break;
      default:
        id = "每日财讯";
    } 
    let [data1] = await Promise.all([
       asyncApi.asyncGetCategoryPost({categoryName:id,page:"1",pageSize:"10",orderBy:"createtime",orderByType:"desc"}),
    ])
    return {
      firstNews: data1.data.data,
      total:data1.data.data.total,
      radio:id,
      title:title,
      keywords:keywords,
      description:description
    }
 },
head () {
    return {
      title: this.title,
      meta: [
         { hid:"keywords", name: 'keywords', content: this.keywords},
         { hid:"description", name: 'description', content: this.description}
      ]
    }
  }
};
</script>


<style scoped>
.fenye{
      text-align: center;
    padding-top: 50px;
}
.erweima img{
  display: inline-block;
  width: 200px;
}
.erweima .imgbox{
  text-align: center;
}
.icon1:hover{
  color: rgb(18, 210, 38)
}
.icon2:hover{
  color: rgb(255, 2, 14)
}
.icon3:hover{
  color: rgb(245, 194, 65)
}
.line{
  display: inline-block;
  margin: 0 10px;
  height: 14px;
  width: 1px;
  background: #333;
  vertical-align: middle;
}
.icon{
  font-size: 22px;
  margin-left: 6px;
  color: #b5b6b6;
  vertical-align: middle;
}
.num{
  margin-left: 6px;
}
.curpon{
  cursor: pointer;
}
.advisory{
  width: 1200px;
  margin: 10px auto;
  background: white;
  box-sizing: border-box;
  padding: 30px;
}
.title{
  font-size: 22px;
  color: #333;
  margin-bottom: 20px;
}
.advisory ul li{
  display: flex;
  height: 132px;
  box-sizing: border-box;
  
}
.advisory ul li:hover a{
  color: #b41d24;
}
.advisory ul li:hover .date{
  color: #b41d24;  
}
.advisory ul li:hover .yuan{
   border: 1px solid #b41d24;
}
.advisory ul li:hover .yuan i{
   background: #b41d24;
}
.date{
  font-size: 20px;
  color: #333;
  height: 100%;
  width: 140px;
  border-right: 1px solid #e6e6e6;
      padding: 30px 0;
    box-sizing: border-box;
}
.content{
      padding: 30px 0;
    box-sizing: border-box;
    margin-left: 30px;
    border-bottom: 1px dashed #e6e6e6; 
}
.content .maintitle{
  height: 30px;
}
.content .maintitle .yuan{
  height: 18px;
  width: 18px;
  border: 1px solid #999;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  margin-right: 40px;
  vertical-align: middle;
}
.maintitle{
  margin-left: -40px;
}
.content .maintitle .yuan i{
  display: inline-block;
  height: 14px;
  width: 14px;
  vertical-align: middle;
  background: #999;
  display: inline-block;
  border-radius: 50%;
  margin-top: 1px;
}
.content .maintitle a{
  font-size: 18px;
  color: #333;
  vertical-align: middle;
   white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 900px;
    display: inline-block;
}
.content .fenxiang{
  margin-top: 30px;
  text-align: right;
  font-size: 14px;
  vertical-align: middle;

}
</style>
